<template>
  <div class="main-box">
    <ProTable :columns="columns" :pagination="false" :requestApi="getDisList" ref="proRef">
      <template #opera="{ row }">
        <el-button type="primary" link :icon="EditPen" @click="opera(row)">编辑</el-button>
        <el-button type="danger" link :icon="Delete" @click="deleteApi([row.id])">删除</el-button>
      </template>
      <template #name="{ row }">
        <div class="flex justify-center">
          <div class="flex flex-row">
            <div class="flex flex-col justify-center mr-5px">
              <el-image :src="userInfo.prefix + row.cover" class="w-20px"></el-image>
            </div>
            <div>
              <span :style="{ color: row.textColor }">{{ row.name }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">创建排行标签</el-button>
        <el-button type="danger" @click="deleteApi(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
      </template>
    </ProTable>
    <disadvantage ref="disRef"></disadvantage>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getDisList, createDis, editDis, deleteDis } from "@/api/modules/dis";
import disadvantage from "../components/disadvantage.vue";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useUserStore } from "@/stores/modules/user";

const { userInfo } = useUserStore();

const proRef = ref<InstanceType<typeof ProTable> | null>();

const deleteApi = async (ids: any) => {
  await useHandleData(deleteDis, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};

const columns: ColumnProps[] = [
  { type: "index", label: "#", width: 50 },
  { prop: "name", label: "排行名称" },
  { prop: "opera", label: "操作" }
];

const disRef = ref<InstanceType<typeof disadvantage> | null>();

const opera = (row: any) => {
  const params: any = {
    row: row ? row : { name: "", cover: "", textColor: "#000" },
    api: row ? editDis : createDis,
    getTable: proRef.value?.getTableList
  };
  disRef.value?.acceptParams(params);
};
</script>

<style></style>
